<!DOCTYPE html>
<html> 
<head>
  <meta charset="utf-8"/>
  <title>Sistema de alerta de sismo</title>
 <link rel="stylesheet" href="Style/styleHome.css" type="text/css" charset="utf-8"/>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script type="text/javascript">
  $(document).ready(function(){
             
        
            $('#contacto').submit(function(event){ //en el evento submit del fomulario

                event.preventDefault();  //detenemos el comportamiento por default
 
                var url = $(this).attr('action');  //la url del action del formulario
                var datos = $(this).serialize(); // los datos del formulario
                
                $.ajax({
                    type: 'POST',
                    url: url,
                    data: datos,
                    beforeSend: mostrarLoader(), //algun icono que indique se esta enviando la informacion
                    success: function(data) {
                    $('#cargando').fadeOut("fast");
                    
                    $("#mensaje").empty();
                    
                       if(data){
                         
                        $("#mensaje").append("Sus datos han sido guardados correctamente");
                        $("#mensaje").css('display','inline');
                         $("#mensaje").css('color','#00b900');
                        //windows.setTimeout('location.href = "index.php"', 3000);
                       
                       }
                         else{
                         $("#mensaje").append("Ocurrio un error al guardar su informacion");
                         $("#mensaje").css('display','inline');
                           $("#mensaje").css('color','#ff0000');
                         }
                    }
                    
                });
        
              
        
            });
       }); 
        function mostrarLoader(){
            $('#cargando').fadeIn("slow"); //muestro el loader de ajax
        };
    </script>


</head>

<body>
    
<div id="content">
    
  <div id="header">
  <img src="images/logo3.png" width="141" height="134" />
  <img src="images/header2.png" width="865" height="50" />
  <div class="info"> 
      <?php
session_start();

    echo '<h3><a href="logout.php">Salir</a> </h3>';

?>
  </div>
  </div>
  
  
  
  <div id="contenido">
  <form  id="contacto" name="contacto" method="post" action="updateEstadoUsuario.php">
    <fieldset id="form">
        <legend>Mensaje para contacto</legend>
        <ol>
            <li><label>Estado </label>
            <input  type="radio" name="estado" id="estado_b" value="1" required>Bien
            <input type="radio" name="estado" id="estado_m" value="0"  required>Mal    
            </li>
            <li><label>Ubicación: </label><input id="ubicacion" type="text" name="ubicacion" value="" size="25" placeholder="ingrese su ubicacion" required /></li>
           <li><label>Mensaje:</label> <textarea  name="mensaje" cols="25" rows="10" placeholder="Ingrese el mensaje que quiere dejar a su contacto"  required > </textarea> </li>  
        </ul>
            <p align="center"><input type="submit" name="submit" class="botonEnviar" value="guardar datos" /></p>
            <span id="mensaje" style="display:none;"> <center><img  style="display:none;" id="cargando" widht="43" height="11" src="images/ajax-loader.gif"/><br/>Cargando...</center></span>

    </fieldset>
</form>
  </div>
  <div id="footer" class="foto"><img src="images/footer.png" width="1010" height="79" /></div>
</div>
</body>
</html>

 